<template>
    <div class="odoracleDetail-box">
        <x-header slot="header"
                  style="width:100%;height:46px;background-color: #ec6758"
                  title="报表明细"
                  :left-options="{backText: '', preventGoBack:true}"
                  @on-click-back="goBackPage"
        ></x-header>

        <div class="list_liebiao" style="margin-top: 0 !important;">
            <h4 v-text="name"  style="padding-top: 20px;font-weight: 600;"></h4>

            <div class="infoItems_title">报表建议</div>
            <p v-html="suggest" style="display: block" class="infoItems"></p>

            <div class="infoItems_title">报表条件</div>
            <p v-html="condition"  class="infoItems"></p>

            <div class="infoItems_title">字段口径</div>
            <p  v-html="requirements"  class="infoItems"></p>

            <div class="infoItems_title">字段算法</div>
            <p  v-html="algorithm" class="infoItems" ></p>

            <div class="infoItems_title">科目</div>
            <p  v-html="section" class="infoItems" ></p>

            <div class="infoItems_title">附件</div>
            <a  v-for="(item,index) in fileIds"  v-text="'附件'+(index+1)" :href="changeURl(item)" class="infoItems" ></a>

            <div class="infoItems_title">图片</div>
            <img style="width:100%" :src="styleBase64" @click="showDialogStyle = true" alt=""/>

            <!--<div>备注</div>-->
        </div>
        <x-dialog v-model="showDialogStyle" hide-on-blur :dialog-style="{'max-width': '100%',overflow:'scroll', width: '100%', height: '80%', 'background-color': 'transparent'}">
            <p style="color:#fff;text-align:center;" >
                <img :src="styleBase64" style="width: 100%" alt="" />

                <x-icon type="ios-close-outline" style="fill:#fff;" @click="showDialogStyle = false"></x-icon>
            </p>
        </x-dialog>

    </div>
</template>

<script>
    /**
     *  odoracle详情
     */
    import {
        XHeader,
        XDialog,
        dateFormat

    } from 'vux';

    import SysApi from '../../api/api'

    export default {
        name: 'odoracleDetail',
        data() {
            return {
                activePageItem: 0, // 激活当前页
                isLastStep: false, // 是否是最后一步
                showDialogStyle:false,

                id: '',
                algorithm: '',
                condition: '',
                name: '',
                requirements: '',
                suggest: '',
                styleBase64:'',
                fileIds:[],
                section:''
            };
        },
        methods: {
            formatDateTime(date) {
                return dateFormat(date, 'YYYY-MM-DD HH:mm')
            },
            changeURl(item){
                let baseURl = "http://cd.zlsoft.com/api/report/down?id="+this.id+"&fileId="+encodeURIComponent(item);
                return baseURl;
            },
            downloadTxt(item){
                console.log(item);
            },
            init() {
                let _this = this;
                let data = {
                    id: _this.$route.query.id
                }
                SysApi.reportInfo(data).then(
                    res => {
                        this.$nextTick(function () {
                            _this.id = res.data.id;
                            _this.condition = res.data.condition;
                            _this.name = res.data.name;
                            _this.requirements = res.data.requirements;
                            _this.suggest = res.data.suggest;
                            _this.algorithm = res.data.algorithm;
                            _this.fileIds = res.data.fileIds;
                            _this.section = res.data.section;
                            _this.styleBase64 = "data:image/jpeg;base64,"+res.data.styleBase64;
                        })

                    }, error => {
                    }
                )
            },

            goBackPage() {
                this.$router.push({name:"index/odoracleList"});
            },
        },
        activated: function () {
            this.id = -1;
            this.algorithm = "";
            this.condition = "";
            this.name = "";
            this.requirements = "";
            this.suggest = "";
            this.styleBase64 = "";
            this.section = "";
            this.fileIds = [];

            this.init();
        },
        components: {
            XHeader,
            XDialog
        }
    };

</script>

<style lang="less">
    @import "../../style/theme.less";
    @import "../../style/mixin.less";

    .odoracleDetail-box {
        background-color: @color-background-default;
        .list_liebiao{
            .infoItems{
                display: block;
                border: 1px solid #fff;
                padding: 10px 0;
            }
        }

        .questionDetail_title {
            .color-linear-gradient(@color-primary-light, @color-primary, 90deg);
            color: #fff;
            padding: 0.5rem 1.25rem;
            font-size: 14px;
        }
        .vux-header {
            .color-linear-gradient(@color-primary-light, @color-primary, 90deg);
            .vux-header-left {
                .left-arrow:before {
                    border: solid 1px @color-white;
                    border-width: 2px 0 0 2px;
                }
            }
        }
        .progressState div p {
            font-size: @font-size-tiny;
        }
        .weui-wepay-flow__state {
            width: 16px;
            height: 16px;
            top: -1px;
            padding-top: 1px;
        }
        .currentStep .weui-wepay-flow__state {
            width: 16px;
            height: 16px;
            padding-top: 1px;
            border: 1px solid @color-primary;
            color: @color-primary;
            border-radius: 50%;
            background-color: @color-white;
        }
        .weui-input {
            height: 28px;
            line-height: 28px;
        }
        .weui-wepay-flow, .weui-wepay-flow-auto {
            padding: 10px 40px 30px;
            background: @color-white;
        }
        .weui-wepay-flow__li_done .weui-wepay-flow__state,
        .weui-wepay-flow__process {
            background-color: @color-primary;
        }
    }

    .vux-search-fixed {
        position: static !important;
    }

    .weui-search-bar__cancel-btn {
        color: #000000;
    }

    .list_liebiao {
        padding: 1rem 1rem 1rem 1rem;
        margin-bottom: 20px;
        background: @color-white;
        .infoItems_title{
            .color-linear-gradient(@color-primary-light, @color-primary, 90deg);
            color: #fff;
            padding: 0.5rem 1.25rem;
            font-size: 16px;
        }
        h4 {
            font-size: @font-size-primary;
            font-weight: normal;
            padding-bottom: 0.3rem;
        }
        div span {
            display: inline-block;
            font-size: @font-size-medium;
            padding-bottom: 0.3rem;
            color: #999;
        }

        p {
            font-size: @font-size-medium;
        }
    }

</style>
